<!--
 * @Author: Chuckie
 * @Email: chuckie@aliyun.com
 * @Date: 2022-11-10 14:35:49
 * @LastEditTime: 2023-06-05 15:05:49
 * @Description: 
 * @FilePath: /base-web/src/views/system/tenant/list.vue
 *  
-->
<template>
  <div class="app-container scroll-y">
    <!--操作-->
    <div class="page-filter rowSS">
      <!--条件搜索-->
      <el-form ref="refsearchForm" :inline="true" class="demo-searchForm">
        <el-form-item :label="$t('common.search.keywords')">
          <el-input v-model="state.filter.keyword" :disabled="state.table.loading" :placeholder="$t('common.search.placeholder.input')" />
        </el-form-item>
      </el-form>

      <!--查询按钮-->
      <el-button type="primary" :disabled="state.table.loading" @click="onSelect">
        <el-icon style="vertical-align: middle">
          <Search />
        </el-icon>
         <span style="vertical-align: middle">{{$t('common.search.search')}}</span>
      </el-button>
      <el-popconfirm :title="$t('common.message.sure')" @confirm="onRemoves">
        <template #reference>
          <el-button type="danger" :disabled="!multipleSelection.length">
            <el-icon style="vertical-align: middle">
              <Delete />
            </el-icon>
           <span style="vertical-align: middle">{{$t('common.search.batchDelete')}}</span>
          </el-button>
        </template>
      </el-popconfirm>
      <el-button type="primary" :disabled="state.table.loading" @click="router.push('/system/tenant/detail')">
        <el-icon style="vertical-align: middle">
          <Plus />
        </el-icon>
        <span style="vertical-align: middle">{{ $t('common.search.add') }}</span>
      </el-button>
    </div>

    <!--数据-->
    <div class="page-data">
      <el-table
        ref="multipleTableRef"
        v-loading="state.table.loading"
        :data="state.table.dataSource"
        :border="true"
        stripe
        table-layout="auto"
        @selection-change="onSelectionChange"
      >
        <el-table-column type="selection" width="36" align="center" fixed />
        <el-table-column type="index" width="50" :label="$t('common.table.serialNumber')" align="center" fixed />
        <el-table-column property="code" :label="$t('tenant.table.code')" />
        <el-table-column property="name" :label="$t('tenant.table.name')" />
        <el-table-column property="des" :label="$t('tenant.table.des')" />
        <el-table-column fixed="right" :label="$t('common.table.operation.operation')" width="160">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="router.push(`/system/tenant/detail/${scope.row.id}`)">
              {{$t('common.table.operation.edit')}}
            </el-button>
            <el-popconfirm :title="$t('common.message.sure')" @confirm="onRemove([scope.row.id])">
              <template #reference>
                <el-button link type="danger" size="small">{{$t('common.table.operation.delete')}}</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-pagination">
      <el-pagination
        v-model:currentPage="state.pagination.pageNum"
        v-model:page-size="state.pagination.pageSize"
        :page-sizes="[20, 50, 100]"
        small="small"
        :disabled="state.table.loading"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.pagination.total"
        @current-change="onSelect"
        @size-change="onSelect"
      />
    </div>
    <div style="height: 100px">
      <div style="width: 100px; height: 100px" id="container"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElTable } from 'element-plus'
import { Search, Delete, Plus } from '@element-plus/icons-vue'
import { BaseTenant, select, create, update, remove } from './api/base-tenant'

const { proxy }: any = getCurrentInstance()

const router = useRouter()

const state = reactive({
  filter: {
    keyword: null
  },
  table: {
    loading: true,
    dataSource: Array<BaseTenant>()
  },
  pagination: {
    pageNum: 1,
    pageSize: 20,
    total: 0
  },

 
})

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<BaseTenant[]>([])

const onSelectionChange = (records: BaseTenant[]) => {
  multipleSelection.value = records
}
const loadChildrenPermission = async (row: BaseTenant, treeNode: unknown, resolve: (data: BaseTenant[]) => void) => {
  resolve([]);
}

const onSelect = async () => {
  state.table.loading = true
  const data = await select({
    pageNum: state.pagination.pageNum,
    pageSize: state.pagination.pageSize,
    ...state.filter,
  })

  state.table.dataSource = data.data.items

  state.pagination.total = data.data.total
  state.table.loading = false
}

 

const onRemoves = async () => {
  onRemove(multipleSelection.value.map((item: BaseTenant) => item.id || ''))
}

const onRemove = async (ids: Array<string>) => {
  console.log(state.table.dataSource  )
  const data = await remove(ids)
  proxy.$message({  message: proxy.$t('common.message.deleteSuccessfully'), type: 'success' })
  onSelect()
}

onMounted(() => {
  onSelect()
})
</script>

<style scoped lang="scss"></style>
